<template>
  <div class="reply-wrap">
    <div class="reply-item" v-for="item in replyList" :key="item.id">
      <div class="avatar">
        <el-avatar :size="40" :src="headImg(item.sysUser)"></el-avatar>
      </div>
      <div class="content">
        <div class="info">
          <span class="user-name">
            {{ item.sysUser.userName }}
            <el-tag v-if="item.sysUser.id == author" size="mini">作者</el-tag>
          </span>
          <span class="create-time">{{ item.createTime }}</span>
        </div>
        <div class="content-in">
          {{ item.contents }}
          <div class="reply-btn">
            <el-popconfirm
              title="确定删除吗？"
              v-if="userId == author"
              @confirm="handleDelete(item)"
            >
              <el-button
                type="text"
                slot="reference"
                icon="el-icon-circle-close"
                >删除</el-button
              >
            </el-popconfirm>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  props: ['replyList', 'author', 'userId'],
  methods: {
    async handleDelete(row) {
      await this.$store.dispatch('delBbsComment', row)
      this.$bus.$emit('refreshBbsCommentList')
    },
  },
}
</script>
<style scoped lang="scss">
.reply-wrap {
  background: #f7f8fa;
  border-radius: 5px;
}
.reply-item {
  padding: 10px 0;
  margin: 10px 0;
  position: relative;
  clear: both;
  border-bottom: 1px solid #f2f2f2;
  &:last-child {
    border-bottom: 0 none;
  }
  .avatar {
    position: absolute;
    left: 0;
    top: 10px;
    width: 80px;
    text-align: center;
  }
  .content {
    padding-left: 80px;
    box-sizing: border-box;
    min-height: 60px;

    .info {
      color: #c9cdd4;
      font-size: 14px;
      line-height: 22px;
      span {
        margin-right: 10px;
      }
      .user-name {
        color: #86909c;
      }
      .create-time {
        float: right;
      }
    }
    .content-in {
      padding: 10px 10px 10px 0px;
      color: #666;
      font-size: 14px;
      line-height: 1.5;
      text-align: justify;
    }
  }
  .reply-btn {
    text-align: right;
  }
}
</style>